<style lang="less">
.form-wrap {
  position:relative;
}
.errortip {
  position:absolute;
  text-align:center;
  padding: 0 60px;
  box-sizing:border-box;
  left:0px;
  width:100%;
  div{
    line-height:30px;
    border-radius:5px;
    background-color:rgba(124, 167, 243,0.1);
    color:rgb(124, 167, 243);
  }
}
</style>

<template>
  <div class="bg-white">
    <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
    <div class="form-wrap">
    
      <div class="displayflex form-item" :class="{'focus-line':pwFocus}" v-show="!changeAccount">
        <i class="iconfont icon-password"></i>
        <div class="flex1" >
          <input :type="showpw?'text':'password'" placeholder="原始密码"
            @focus="pwFocus=true" 
            @blur="pwFocus=false"
            @keyup.enter="submit"
            v-model.trim="password">
        </div>
        <i class="iconfont" :class="showpw?'icon-eye':'icon-eye-close'" @click="swapType(1)"></i>
      </div>

      <div class="displayflex form-item" :class="{'focus-line':newPwFocus}">
        <i class="iconfont icon-password"></i>
        <div class="flex1" >
          <input :type="shownewpw?'text':'password'" placeholder="请设置新密码"
            @focus="newPwFocus=true" 
            @blur="newPwFocus=false; diffPass(2)"
            @keyup.enter="submit"
            v-model.trim="newPassword">
        </div>
        <i class="iconfont" :class="shownewpw?'icon-eye':'icon-eye-close'" @click="swapType(2)"></i>
      </div>

      <div class="displayflex form-item" :class="{'focus-line':rePwFocus}">
        <i class="iconfont icon-password"></i>
        <div class="flex1" :class="{'focus-line':rePwFocus}">
          <input :type="showrepw?'text':'password'" placeholder="请确认新密码"
            @focus="rePwFocus=true" 
            @blur="rePwFocus=false; diffPass(2)"
            @keyup.enter="submit"
            v-model.trim="rePassword">
        </div>
        <i class="iconfont" :class="showrepw?'icon-eye':'icon-eye-close'" @click="swapType(3)"></i>
      </div>

      <div class="errortip" v-if="showDiff"><div>新密码校验输入不一致，请重新输入</div></div>

      <!-- 都有值去掉gray -->
      <div class="login-btn" v-if="showBtn" @click="submit">确定</div>
      <div class="login-btn gray" v-else>确定</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLoad:false,

      password:'',
      newPassword:'',
      rePassword:'',

      showpw:false,
      shownewpw:false,
      showrepw:false,

      pwFocus:false,
      newPwFocus:false,
      rePwFocus:false,

      showBtn:false,
      showDiff:false,
    };
  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    },
    changeAccount(){
      if(sessionStorage.changeAccount) this.password = '123456';
      return sessionStorage.changeAccount?sessionStorage.changeAccount:null;
    },
    smsCode(){
      return sessionStorage.smsCode?sessionStorage.smsCode:null;
    }
  },
  watch:{
    password(n,o){
      this.showButton();
    },
    newPassword(n,o){
      this.showButton();
    },
    rePassword(n,o){
      this.showButton();
    },
  },

  methods:{
    swapType(type){
      if(type==1) this.showpw = !this.showpw;
      if(type==2) this.shownewpw = !this.shownewpw;
      if(type==3) this.showrepw = !this.showrepw;
    },

    checkForm(){
      if(this.newPassword.length < 6)
      {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "密码长度至少要在六位以上，请重新输入"
        })
        return false;
      }


      if(this.newPassword != this.rePassword)
      {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "新密码校验输入不一致，请重新输入"
        })
        return false;
      }

      return true;
    },

    submit(){
      if(!this.showBtn) return false;

      if(!this.checkForm()) return false;
      let query = {
        UserName : this.userInfo.logonuser,
        Password : this.password,
        NewPassword : this.newPassword,
      };

      if(this.changeAccount) {
        query = {
          UserName : this.changeAccount,
          NewPassword : this.newPassword,
          SmsCode : this.smsCode,
        }
        this.doForget(query);
      } else {
        this.doChange(query);
      }
    },

    doChange(query){
      this.showLoad = true;
      this.Ajax.post('UserService/UpdatePassword',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          let _this = this;
          localStorage.clear();
          sessionStorage.clear();
          this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: resp.message,
            onHide(){
              _this.$router.push({
                path:'login'
              })
            }
          });
        }else{
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      })
    },

    doForget(query){
      this.showLoad = true;
      this.Ajax.post('UserService/ForgetPassword',query)
      .then((resp) => {
        this.showLoad = false;
        if(resp.code == 'SUCC'){
          let _this = this;
          localStorage.clear();
          sessionStorage.clear();
          this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: resp.message,
            onHide(){
              _this.$router.push({
                path:'login'
              })
            }
          });
        }else{
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      })
      .catch((err) => {
        this.showLoad = false;
        console.log(err);
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: err.message
        });
      })
    },

    showButton(){
      if(this.password != '' && this.newPassword != '' && this.rePassword != '') {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },
    
    diffPass(type) {
      if(type == 2)
      {
        if(this.newPassword.length >= 6 && this.rePassword.length >= 6)
        {
          if(this.newPassword != this.rePassword && this.rePassword != '' && this.newPassword != '') {
            this.showDiff = true;
          } else {
            this.showDiff = false;
          }
        }
      }
    }
  }
}
</script>